<!-- 我是评价分析 -->
<template lang="html">
  <div class="evaluateBox">
    <el-row class="formBox box1">
      <el-col :span="2" class="text-right">
        <span>商家名：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input v-model="businessmenName" size="small" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2" class="text-right">
        <span>评论时间：</span>
      </el-col>
      <el-col :span="8" class="text-left">
          <el-date-picker
            size="small"
            v-model="startDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
          <span>至</span>
          <el-date-picker
            size="small"
            v-model="endDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
      </el-col>

    </el-row>
    <el-row class="formBox">
      <el-col :span="2" class="text-right">
        <span>评分：</span>
      </el-col>
      <el-col :span="8" class="text-left">
        <el-radio-group class="redioBox" v-model="radio" size="small">
          <el-radio :label="6">全部</el-radio>
          <el-radio :label="5">5</el-radio>
          <el-radio :label="4">4</el-radio>
          <el-radio :label="3">3</el-radio>
          <el-radio :label="2">2</el-radio>
          <el-radio :label="1">1</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row class="formBox box2">
       <el-col :span="2" :offset="2" class="text-left">
         <el-button type="success" size="small" @click="find">筛选</el-button>
       </el-col>
    </el-row>

    <el-row class="dataBox" v-loading.body="dataLoading">
      <el-col :span="2">
        <p class="score green">{{avgScore?avgScore:'0'}}</p>
        <p>平均分</p>
      </el-col>
      <el-col :span="4">
        <p class="score green">{{commentRatio?commentRatio:'0'}}</p>
        <p>点评率（％）</p>
      </el-col>
      <el-col :span="8">
        <p class="score green">{{goodValue?goodValue:'0'}}</p>
        <p>美好值（元）</p>
      </el-col>
      <el-col :span="2">
        <p class="score">{{numb5?numb5:'0'}}</p>
        <p>5分</p>
      </el-col>
      <el-col :span="2">
        <p class="score">{{numb4?numb4:'0'}}</p>
        <p>4分</p>
      </el-col>
      <el-col :span="2">
        <p class="score">{{numb3?numb3:'0'}}</p>
        <p>3分</p>
      </el-col>
      <el-col :span="2">
        <p class="score">{{numb2?numb2:'0'}}</p>
        <p>2分</p>
      </el-col>
      <el-col :span="2">
        <p class="score">{{numb1?numb1:'0'}}</p>
        <p>1分</p>
      </el-col>
    </el-row>

    <el-row class="tableBox" v-loading.body="loading">
      <el-tabs v-model="activeName2" @tab-click="get" type="card">
          <el-tab-pane label="产品评分" name="one">
            <!-- <ul class="listBox">
                <li class="first">
                  <span class="product gray">产品名</span>
                  <span class="name gray">商家</span>
                  <span class="review gray">点评数</span>
                  <span class="good gray">美好值</span>
                  <span class="average gray">平均分</span>
                </li>
                <li v-for="item in list">
                  <span class="product">{{item.productName}}</span>
                  <span class="name text-left">{{item.businessName}}</span>
                  <span class="review text-left">{{item.commentNum}}</span>
                  <span class="good">{{item.goodValue}}</span>
                  <span class="average green">{{item.avgScore}}</span>
                </li>
            </ul> -->
          </el-tab-pane>
          <el-tab-pane label="商家评分" name="two">
            <ul class="listBox">
                <li class="first">
                  <span class="name2 gray">商家</span>
                  <span class="review green" style="cursor:pointer;" @click="orderBy('commentNum',orderTypeList.commentNum)">点评数{{orderTypeList.commentNum=='up'?'↑':'↓'}}</span>
                  <span class="good green" style="cursor:pointer;" @click="orderBy('goodValue',orderTypeList.goodValue)">美好值{{orderTypeList.goodValue=='up'?'↑':'↓'}}</span>
                  <span class="average green" style="cursor:pointer;" @click="orderBy('average',orderTypeList.average)">平均分{{orderTypeList.average=='up'?'↑':'↓'}}</span>
                </li>
                <li v-for="item in list">
                  <span class="name2 text-left">{{item.businessName?item.businessName:'-'}}</span>
                  <span class="review text-left">
                    {{item.commentNum?item.commentNum:'0'}}
                  </span>
                  <span class="good">
                    {{item.goodValue?item.goodValue:'0'}}
                  </span>
                  <span class="average green">{{item.avgScore?item.avgScore:'0'}}</span>
                </li>
            </ul>
          </el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row class="text-right">
      <el-col :span="2" :offset="16" style="line-height:30px;">共{{total}}条</el-col>
      <el-col :span="6" class="text-right">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="pageSize"
          :page-count="pageCount"
          layout="prev, pager, next, jumper">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
var url;

export default {
  data (){
    return {
      list:[],
      radio:'',
      businessmenName:'',
      productName:'',
      startDate:'',
      endDate:'',
      typeName:'',
      activeName2:'two',
      options:['游玩','酒店','剧场','OTA','卡券','团体活动','教育培训'],
      goodsTab:1,
      numb1:0,
      numb2:0,
      numb3:0,
      numb4:0,
      numb5:0,
      avgScore:0,
      goodValue:0,
      commentRatio:0,
      page:1,
      pageSize:10,
      pageCount:1,
      total:0,
      loading:false,
      dataLoading:false,
      orderType:'',
      orderTypeList:{
        commentNum:'down',
        goodValue:'down',
        average:'down'
      },
    }
  },
  methods:{
    orderBy:function (val){
      if(this.orderTypeList[val]=='up'){
        this.orderType=val+'_Down';
        this.orderTypeList[val]='down';
      }else{
        this.orderType=val+'_Up';
        this.orderTypeList[val]='up';
      }
      this.getList();
    },
    find:function (){
      this.getList();
      this.getNumb();
    },
    get:function (){
      var that = this;
      // switch (that.activeName2) {
      //   case 'one':
      //     that.$router.push({path:'/statistical/evaluate/product'});
      //     break;
      //   case 'two':
      //     that.$router.push({path:'/statistical/evaluate/merchants'});
      //     break;
      //   default:
      // }
    },
    getNumb:function (){
      var that = this;
      that.dataLoading=true;
      var star=that.startDate.getTime();
      var end=that.endDate.getTime();
      if(that.radio==6){
        var score='';
      }else{
        var score=that.radio;
      }
      axios.get(url+"/v1/commentAnalysis/gets/business/summaryAnalysis",{
        params:{
          businessmenName:that.businessmenName,
          endDate:end,
          score:score,
          startDate:star,
          typeName:that.typeName
        }
      }).then((res)=>{
        if(res.data.code==0){
          var data=res.data.data;
          that.numb1=data["1分"];
          that.numb2=data["2分"];
          that.numb3=data["3分"];
          that.numb4=data["4分"];
          that.numb5=data["5分"];
          that.avgScore=data.avgScore;
          that.goodValue=parseInt(data.goodValue);
          that.commentRatio=parseInt(data.commentRatio*100);
        }
        that.dataLoading=false;
      })
    },
    handleCurrentChange:function (){
      this.getList();
      this.getNumb();
      console.log(this.page);
    },
    getList:function (){
      var that = this;
      that.loading=true;
      if(!that.startDate||!that.endDate){
          that.$message({
           showClose: true,
           message: '请选择时间段',
           type: 'error'
         });
        return;
      }
      var star=that.startDate.getTime();
      var end=that.endDate.getTime();

      if(that.radio==6){
        var score='';
      }else{
        var score=that.radio;
      }
      axios.get(url+'/v1/commentAnalysis/gets/business',{
        params:{
          businessmenName:that.businessmenName,
          endDate:end,
          pageCount:that.pageSize,
          pageIndex:that.page,
          shopId:that.shopId,
          score:score,
          sort:that.orderType,
          startDate:star,
          type:that.activeName2=='one'?1:2,
          typeName:that.typeName
        }
      }).then((res)=>{
        if(res.data.code==0){
          that.pageCount=res.data.data.pages;
          that.total=res.data.data.total;
          that.list=res.data.data.result;
        }
        that.loading=false;
      })
    }
  },
  watch:{
    activeName2:function (){
      var that = this;
      switch (that.activeName2) {
        case 'one':
          that.$router.push({path:'/statistical/evaluate/product'});
          break;
        case 'two':
          that.$router.push({path:'/statistical/evaluate/merchants'});
          break;
        default:
      }
    }
  },
  created(){
    url=this.$store.state.url;
    var adate=new Date();
    var time=adate.getTime()-7*24*60*60*1000;
    var bdate = new Date(time);
    this.startDate=bdate;
    this.endDate=adate;
    this.getList();
    this.getNumb();
  }
}
</script>

<style lang="Sass" scoped>
.evaluateBox{width: 100%; height: 100%;padding: 10px 10px 10px 10px; box-sizing: border-box;

  .formBox{ background: #fff; padding: 10px; text-align: left;

    .text{ height: 30px;
      .el-input__inner{height: 30px; width: 100%;}
    }
    .date{width: 150px; height: 30px;
      .el-input__inner{height: 30px; width: 100%;}
    }
    .select{width: 120px;
      .el-input__inner{width: 100%;}
    }
    .el-date-editor.el-input{width: 150px;}
    .redioBox{margin-top: 8px; margin-left: 10px;}
  }
  span{font-size: 13px; line-height: 30px;}
  .box1{border-radius: 10px 10px 0 0; padding: 20px 10px 0 10px;}
  .box2{border-radius: 0 0 10px 10px; padding: 0px 10px 20px 10px;}
  .tableBox{background: #fff; padding: 20px;  border-radius: 10px;}
  .cell{text-align: left;}
  .btn{height: 32px;
    span{line-height: 0px;}
  }
  .dataBox{background: #fff; margin: 10px 0; border-radius: 10px; padding: 10px 0;
    .score{font-size: 24px;}
    p{font-size: 12px;}
  }



  .listBox{width: 100%; background: #fff;

    .first{display: flex; height: 30px; line-height: 30px; text-align: left; padding: 5px;
        span{display: inline-block; line-height: 30px; }
        .product{flex:1;}
        .name{flex: 0 0 280px;}
        .name2{flex:1;}
        .review{flex: 0 0 200px;}
        .good{flex: 0 0 200px;}
        .average{flex: 0 0 80px;}
    }
    li{display: flex; height: auto; line-height: 30px; text-align: left; padding: 15px 5px 15px 5px;

      span{display: inline-block;  box-sizing: border-box; font-size: 13px; line-height: 16px;}
      .product{flex:1; padding-right: 20px;}
      .name{flex: 0 0 280px;}
      .name2{flex:1;}
      .review{flex: 0 0 200px;}
      .good{flex: 0 0 200px;}
      .average{flex: 0 0 80px;}
    }
    li:nth-of-type(odd){background: #FAFAFC;}
    .el-checkbox, .el-checkbox__input{white-space:normal; font-size: 12px;}
  }
}
</style>
